<!-- 求助详情页 -->
<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-nav-bar title="求助" left-arrow @click-left="arrow" />

    <!-- 标题 -->
    <van-cell
      :title="HelpPage.helpTitle"
      title-style="font-size:24px;font-weight: bolder;"
    />
    <!-- 头像信息 -->
    <van-cell-group class="personal">
      <van-image
        round
        width="72px"
        height="60px"
        :src="HelpPage.userInfo.avatar"
      />
      <!-- 姓名信息 -->
      <van-cell
        center
        :title="HelpPage.userInfo.nickname"
        :label="HelpPage.userInfo.introduction"
        title-style="font-size:19px"
      >
        <template #right-icon>
          <van-button v-if="follow"
                      plain
                      hairline
                      size="small"
                      icon="plus"
                      color="#64C0DF"
                      round
                      @click="Follow"
          >关注</van-button
          >
          <van-button v-else
                      plain
                      hairline
                      size="small"
                      icon="success"
                      color="red"
                      round
                      @click="Follow"
          >已关注</van-button
          >
        </template>
      </van-cell>
    </van-cell-group>

    <!-- 原因 -->
    <div class="content">
      <p>
       内容：{{HelpPage.helpContent}}</p>
       <img :src="HelpPage.url" alt="" />
    </div>

    <!-- 时间以及区域 -->
    <div class="time">
      <p>编辑于2022-03-22 07:59 禁止转载 所属区域: 本校区</p>
    </div>

    <!-- 各项信息 -->
    <van-cell-group>
      <van-field label="开始时间" :value="HelpPage.startTime" readonly />
      <van-field label="结束时间" :value="HelpPage.endTime" readonly />
      <van-field label="难度">
        <template #input>
          <van-rate v-model="HelpPage.difficulty" readonly />
        </template>
      </van-field>
      <van-field label="人数" v-model="HelpPage.applyLimit" readonly />
      <van-field label="报酬积分" v-model="HelpPage.rewardValue" readonly />
      <van-field label="求助地点" v-model="HelpPage.address" readonly />
      <van-field label="联系方式" v-model="HelpPage.contact" readonly />
      <van-button class="vb" round color="linear-gradient(to right, #ff6034, #ee0a24)" size="normal" @click="contact">联系ta</van-button>
      
      <van-button
        block
        size="large"
        color="linear-gradient(to left,#45C8E5,#198CDC)"
        @click="accept"
        >接受请求</van-button
      >
    </van-cell-group>

    <!--  -->
  </div>
</template>

<script>
import {Toast} from "vant";
import {mapState} from "vuex";

export default {
  data() {
    return {
      follow: true,
      HelpPage: {},
      url: ''
    };
  },
  computed: {
    ...mapState(['userinfo'])
  },
created() {
this.getDetail()
},
  methods: {
    arrow() {
      console.log("返回");
      history.go(-1)
    },
    getDetail(){
      const dat ={
        helpId: this.$route.query.helpId,
        moduleId: this.$route.query.moduleId,
        userId: this.$route.query.userId,
        url: this.$route.query.url
      }
      const url = "http://localhost:10005/cooperation/detail"
      this.axios.post(url,dat).then(response =>{
        if(response.data.state==200){
          console.log(response.data.data)
          this.HelpPage = response.data.data
          this.HelpPage.contact = '18487562315'
          this.HelpPage.url = dat.url
        }
      })
    },
    Follow(){
      //关注请求
      if(this.follow==true){
        const url = 'http://localhost:10002/ums/Attention/attention'
        this.axios.post(url+"?userId="+this.userinfo.id+"&followUserId="+this.$route.query.userId).then(response =>{
          if(response.data.state==200){
            console.log("关注成功")
            this.follow=false;
          }else {
            console.log(response.data.data)
          }
        })

      }else {
        //取消关注请求
        const url = 'http://localhost:10002/ums/Attention/notAttention'
        this.axios.post(url+"?userId="+this.userinfo.id+"&followUserId="+this.$route.query.userId).then(response =>{
          if(response.data.state==200){
            console.log("取消关注成功")
            this.follow=true;
          }else {
            console.log(response.data.data)
          }
        })
      }
    },
    //揭榜
    accept(){
      const url = "http://localhost:10005/apply/addApply"
      const dat = {
        cooperationId: this.$route.query.helpId,
        userId: this.$route.query.userId,
      }
      this.axios.post(url,dat).then(response => {
        console.log("数据",response.data)
        if(response.data.state==200){
          console.log("揭榜成功")
          this.$router.push('/homeview/my/mypage/personalPage')
        }else{
          Toast(response.data.message)
          console.log(response.data.message)
        }
      })
    },
    contact() {
      this.$router.push({
        path: '/homeview/message/messagePage/userChat', query: {
          url: this.HelpPage.userInfo.avatar,
          nickName: this.HelpPage.userInfo.nickname
        }
      })
    }
  },
};
</script>

<style lang="stylus" scoped>
.personal {
  display: flex;
  justify-content: center;
  align-items: center;
}
.reason {
  margin: 10px 11px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.reason p {
  margin: 6px;
  font-size: 19px;
}
.time {
  margin: 0 11px;
  font-size: 15px;
  color: #969799;
}
.vb {
  padding-bottom: 5px;
}
.content
  margin 10px 11px
  display fle
  flex-direction column
  justify-content center
  align-items flex-start

.content p
  margin 6px
  font-size 19px

.content img
  max-width 100%

</style>